
	page {
		background-color: #f3f3f3;
		font-size: 28rpx;
		box-sizing: border-box;
		color: #333;
		letter-spacing: 0;
		word-wrap: break-word;
	}
	.UPOP {
		padding: 30rpx;

		.title {
			align-items: center;
			display: flex;
			font-size: 30rpx;
			font-weight: 450;
			height: 90rpx;
			justify-content: center;
		}

		.margin {
			margin: auto;

			.userInfo {
				align-items: center;
				display: flex;
				margin-bottom: 30rpx;
			}

			.vip {
				color: #6c6ceb;
			}

			.userInfo .info {
				color: #3a3a3a;
				display: flex;
				flex-direction: column;
				font-size: 29rpx;
				justify-content: center;
			}

			.userInfo .info .name {
				color: #3a3a3a;
				font-size: 30rpx;
			}

			.userInfo .info .id {
				color: #3a3a3a;
				font-weight: 450;
			}

			.stat {
				align-items: center;
				color: #6c6ceb;
				display: flex;
				font-size: 27rpx;
				margin-bottom: 30rpx;

				.free,
				.have {
					background-color: rgba(81, 181, 237, .1);
					border-radius: 7rpx;
					padding: 13rpx;
				}

				.free {
					margin-left: 30rpx;
				}
			}

			.invite {
				align-items: center;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.info {
					line-height: 50rpx;

					.inviteTitle {
						color: #3a3a3a;
						font-size: 30rpx;
						font-weight: 450;
					}

					.award {
						color: #3a3a3a;
						font-size: 28rpx;
					}

					.award .span {
						color: #6c6ceb;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}

					.hint {
						align-items: center;
						color: #ababab;
						display: flex;
						font-size: 25rpx;
					}

					.hint .more {
						font-size: 40rpx;
						margin-left: 5rpx;
						margin-right: 5rpx;
					}

				}

				.btn {
					align-items: center;
					background-color: rgba(81, 181, 237, .1);
					border-radius: 50rpx;
					color: #6c6ceb;
					display: flex;
					font-size: 28rpx;
					height: 60rpx;
					justify-content: center;
					padding-left: 25rpx;
					padding-right: 25rpx;
					position: relative;

					button {
						button: 0;
						left: 0;
						opacity: 0;
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}

			.videoAd {
				align-items: center;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				margin-top: 15rpx;

				.info {
					line-height: 50rpx;

					.videoAdTitle {
						color: #3a3a3a;
						font-size: 30rpx;
						font-weight: 450;
					}

					.award {
						color: #3a3a3a;
						font-size: 28rpx;
					}

					.award .span {
						color: #6c6ceb;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}

				.btn {
					align-items: center;
					background-color: rgba(81, 181, 237, .1);
					border-radius: 50rpx;
					color: #6c6ceb;
					display: flex;
					font-size: 28rpx;
					height: 60rpx;
					justify-content: center;
					padding-left: 25rpx;
					padding-right: 25rpx;
					position: relative;
				}
			}
		}
	}

	/* 按钮样式处理 */
	button {
		font-size: 28rpx;
	}

	/* 取消按钮默认的边框线效果 */
	button:after {
		border: none;
	}

	/* 设置图片默认样式，取消默认尺寸 */
	image {
		display: block;
		height: auto;
		width: auto;
	}

	/* 输入框默认字体大小 */
	input {
		font-size: 28rpx;
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 行式弹性盒子 */
	.flex_row {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		flex-grow: 1;
	}


	.box-1 {
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.box-2 {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view {
			padding: 0 20rpx;
			height: 100rpx;
		}

		.content {
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}

		.send {
			background-color: #6c6ceb;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;

			&:active {
				background-color: #6c6ceb;
			}
		}
	}

	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull {
				.content {
					margin-left: 32rpx;
					background-color: #fff;
					white-space: pre-wrap;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.content {
					margin-right: 32rpx;
					background-color: #a0e959;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}